<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="statics/xjl/css/jq22-demo.css">
    <link rel="stylesheet" type="text/css" href="statics/xjl/css/jquery-confirm.css" />
    <script type="text/javascript" src="statics/js/jquery.js"></script>

    <script>window.jQuery || document.write('<script src="statics/xjl/js/jquery-1.11.0.min.js"><\/script>')</script>
    <script src="statics/xjl/js/jquery.sticky.min.js"></script>

    <script type="text/javascript" src="statics/xjl/js/jquery-confirm.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="statics/css/bootstrap.css">
    <link rel="stylesheet" href="statics/css/bootstrap-datetimepicker.css">
    <link type="text/css" rel="stylesheet" href="statics/css/uiAlertView-1.0.0.css" />
    <script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

    <script type="text/javascript" src="statics/js/popper.min.js"></script>
    <script type="text/javascript" src="statics/js/bootstrap.js"></script>
    <script type="text/javascript" src="statics/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="statics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="statics/js/jquery.uiAlertView-1.0.0.js"></script>
</head>
<style>
    #eTable td{
        border-top-width: 0
    }
    .table th, .table td {
        text-align: center;
        vertical-align: middle!important;
    }
</style>
<script type="text/javascript">

    function doPage(page) {
       $("#pageNo").val(page);
        $("#searchSubmit").submit();
    }
    function resetButton() {
        window.location.href="equipmentList";
    }





</script>
<script type="text/javascript">


    function cancelOrder(equipmentSheetNo) {
        $.confirm({
            title: '取消装潢单',
            content: '确定取消装潢单'+equipmentSheetNo+'吗?',
            columnClass: 'col-md-6 col-md-offset-3',
            confirmButtonClass: 'btn-danger',
            cancelButtonClass: 'btn-info',
            theme: 'material',
            animationBounce: 2.5,
            confirm: function () {
                $.alert('已成功取消!');
                window.location.href="cancelOrder?equipmentSheetNO="+equipmentSheetNo;
            },
            cancel: function () {

            }
        });


    }
    function transDate(data) {
        var date = new Date(data);
        Y = date.getFullYear() + '-';
        M = ((date.getMonth()+1)<10? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
        D = date.getDate() + ' ';

        return Y+M+D;

    }

</script>

<body>

<div class="container">
    <input type="hidden" value="${map.equipmentSheetState!'-1'}" id="ddState1">
    <form class="form-horizontal" method="post" action="equipmentList"  id="searchSubmit">
        <h3 class="page-header">装潢单查询</h3>
        <input type="hidden" name="pageNo" id="pageNo" value="${pageUtil.pageNo}">
        <div class="form-inline">
            <table class="table table-responsive" id="eTable">
                <tr >
                    <td><label for="equipmentSheetNo">装潢单号</label></td>

                    <td><input type="text" class="form-control" name="equipmentSheetNo"
                               id="equipmentSheetNo" value="${map.equipmentSheetNo}"   data-toggle="tooltip"
                               title="请输入数字"></td>
                    <td><label for="customerName">客户名称</label></td>
                    <td><input type="text" class="form-control" name="customerName"
                               id="customerName" value="${map.customerName}"></td>
                    <td><label for="vin">VIN</label></td>
                    <td><input type="text" class="form-control" name="vin" id="vin" value="${map.vin}"></td>
                    <td><label for="carCard">车牌号</label></td>
                    <td><input type="text" class="form-control" name="carCard"
                               id="carCard" value="${map.carCard}"></td>
                </tr>
                <tr>

                    <td><label for="upholstery">业务类型</label></td>
                    <td><select id="upholstery" name="upholsteryType" class="form-control">
                        <option value="-1" >--请选择--</option>

                    <#list upholsteryTypeList! as type>
                    <#if map.upholsteryType! == type.upholsteryType!>
                    <option value="${type.upholsteryType}" selected="selected">${type.upholsteryType!}</option>
                    <#else>
                    <option value="${type.upholsteryType}">${type.upholsteryType!}</option>
                </#if>
            </#list>
                       </select></td>
                    <td><label for="openingTime1">开单日期</label></td>
                    <td><input type="text" class="form-control date form_datetime
        " data-date-format="dd-MM-yyyy" readonly name="openingTime1" id="openingTime1"></td><td colspan="2">
                    <input type="text" class="form-control  date form_datetime "
                           data-date-format="dd-MM-yyyy" readonly name="openingTime2" id="openingTime2"></td>


                </tr>
                <tr>

                    <td> <label>单据状态</label></td>


                    <td><select id="equipmentSheetState" name="equipmentSheetState" class="form-control">
                        <option value="-1" selected="selected">--请选择--</option>

                        <option value="正在审核">正在审核</option>
                        <option value="审核驳回">审核驳回</option>
                        <option value="审核通过">审核通过</option>
                        <option value="正在装潢">正在装潢</option>
                        <option value="装潢成功">装潢成功</option>
                    </select></td>
                </tr>

            </table>

            <div>
                <button class="btn btn-default col-md-offset-4" type="submit" >查询</button>
                <button class="btn btn-info col-md-offset-1" type="button" onclick="resetButton()">重置</button>
            </div>
        </div>
    </form>
</div>


<div class="container">
    <h3 class="center-block">装饰单信息

    </h3>

    <table class="table table-striped table-bordered table-hover table-condensed table-responsive"
           id="equipmentMessage">
        <tr class="success">
            <th>序号</th>
            <th>操作</th>
            <th>装潢单号</th>
            <th>装饰业务类型</th>
            <th>客户编号</th>
            <th>客户名称</th>
            <th>联系电话</th>
            <th>VIN</th>
            <th>开单时间</th>
            <th>合计金额</th>
            <th>赠送金额</th>
            <th>应收金额</th>
            <th>已受金额</th>
            <th>订单状态</th>
        </tr>
        <#list pageUtil.list as equipmentSheet>
        <tr class="active">
            <td>${equipmentSheet_index+1}</td>
            <td>

                <button class="btn btn-info btn-sm "
                        onclick="javascript:showEquipmentDetail(${equipmentSheet.equipmentSheetNo},'${equipmentSheet.equipmentSheetState}')"><span class="glyphicon glyphicon-align-center" style="color: rgb(0, 0, 0); font-size: 16px;" title="详情"></span>
                </button>

                <button class="btn btn-info btn-sm"
                        onclick="javascript:cancelOrder(${equipmentSheet.equipmentSheetNo})" <#if equipmentSheet.equipmentSheetState=='审核通过'||equipmentSheet.equipmentSheetState=='正在装潢'>disabled</#if>><span class="glyphicon glyphicon-trash" style="color: rgb(0, 0, 0); font-size: 16px;" title="取消订单"> </span></button>
            </td>
            <td>${equipmentSheet.equipmentSheetNo}</td>
            <td>${equipmentSheet.upholsteryType}</td>
            <td>${equipmentSheet.customerId}</td>
            <td>${equipmentSheet.customerName}</td>
            <td>${equipmentSheet.customerTel}</td>
            <td>${equipmentSheet.vin}</td>

            <td>${equipmentSheet.openingTime}</td>
            <td>${equipmentSheet.totalPrice}</td>
            <td>${equipmentSheet.givenMoney}</td>
            <td>${equipmentSheet.receivables}</td>
            <td>${equipmentSheet.received}</td>
            <td>${equipmentSheet.equipmentSheetState}</td>
        </tr>


    </#list>

    <tr>
</tr>
</table>
    <div class=" center-block">
        <button class="btn-info col-sm-1" onclick="doPage(1)">首页</button>
        <button class="btn-info col-sm-1" onclick="doPage(${pageUtil.pageNo}-1)">上一页</button>
        <button class="btn-info col-sm-1" onclick="doPage(${pageUtil.pageNo}+1)">下一页</button>
        <button class="btn-info col-sm-1" onclick="doPage(${pageUtil.pageTotal})">末页</button>
        <span class="col-sm-1"></span></div>

</div>



<script type="text/javascript">




    //初始化标签，配置日期格式插件相关参数
    $(function () {
        $(".form_datetime").datetimepicker({
            format: 'yyyy-mm-dd',
            minView: 'month',
            language: 'zh-CN',
            autoclose: true,//选中自动关闭
            startDate: '1900-01-01',
            todayBtn: true
            //显示今日按钮
        });
    });



    //设置详情按键的事件
    function showEquipmentDetail(equipmentSheetNo,equipmentSheetState) {
        $.getJSON("getEquipmentDetail", {"equipmentSheetNo": equipmentSheetNo},
            function (date) {
                $("#modifySubmit").show()
                $("#equipmentSheetNo1").val(date.equipmentSheetNo);
                $("#upholsteryType1").val(date.upholsteryType);
                $("#equipmentSheetState1").val(date.equipmentSheetState);
                $("#employeeName1").val(date.employeeName);
                var personList = date.installationPersonList;
                var s="<option  value='-1' selected>-请选择-</option>";
                for (i=0;i<personList.length;i++){
                    if (date.personNo==personList[i].personNo) {
                        s+="<option value='"+personList[i].personNo+"' selected>"+personList[i].personName+"</option>"
                    }else {
                    s+="<option value='"+personList[i].personNo+"'>"+personList[i].personName+"</option>";
                    }
                }
                $("#personNo1").append(s);
                $("#comment1").val(date.comment);
                $("#customerId1").val(date.customerId);
                $("#customerName1").val(date.customerName);
                $("#customerTel1").val(date.customerTel);
                $("#series1").val(date.series);
                $("#model1").val(date.model);
                $("#color1").val(date.color);
                $("#vin1").val(date.vin);
                $("#carCard1").val(date.carCard);
                $("#startTime1").val(transDate(date.startTime));
                $("#endingTime1").val(transDate(date.endingTime));
                temporary= date.temporaryCarPartsList
                var myStr="";
                for (i=0;i<temporary.length;i++) {
                    myStr+="<tr><td>"+(i+1)+"</td><td>"+temporary[i].carPartsName+"</td>"+
                        "<td>"+temporary[i].carPartsCount+"</td><td>"+temporary[i].metering+"</td>"+
                        "<td>"+temporary[i].guidedPrice+"</td><td>"+temporary[i].discountRate+"</td>"+
                        "<td>"+temporary[i].actualPrice+"</td><td>"+temporary[i].totalPrice+"</td></tr>";
                }
                $("#decorationTableList tr:not(:first)").remove();
                $("#decorationTableList").append(myStr);
                $("#totalPrice").val(date.totalPrice);
                $("#receivables").val(date.receivables);
                $("#givenMoney").val(date.givenMoney);
                $("#modifySubmit").click(function () {
                    modifyEquipmentSheet();
                });
                if (equipmentSheetState=="审核通过"||equipmentSheetState=="已完成") {
                    $("#modifySubmit").hide()
                }



            });



        $("#myModal").modal();


    }
    //设置修改按键的事件
    function modifyEquipmentSheet() {
        var equipmentSheetNo = $("#equipmentSheetNo1").val();
        var personNo = $("#personNo1 option:selected") .val();
        var comment = $("#comment1").val();
        var customerName = $("#customerName1").val();
        var customerTel =$("#customerTel1").val();
        var series = $("#series1").val();
        var model = $("#model1").val();
        var color =$("#color1").val();
        var vin =$("#vin1").val();
        var carCard =$("#carCard1").val();
        var startTime =$("#startTime1").val();
        var endingTime =$("#endingTime1").val();
       // 新建json对象
        var modifyEquipmentSheetVO={};
        modifyEquipmentSheetVO["equipmentSheetNo"]=equipmentSheetNo;
        modifyEquipmentSheetVO["personNo"]=personNo;
        modifyEquipmentSheetVO["comment"]=comment;
        modifyEquipmentSheetVO["customerName"]=customerName;
        modifyEquipmentSheetVO["customerTel"]=customerTel;
        modifyEquipmentSheetVO["series"]=series;
        modifyEquipmentSheetVO["equipmentSheetNo"]=equipmentSheetNo;
        modifyEquipmentSheetVO["model"]=model;
        modifyEquipmentSheetVO["color"]=color;
        modifyEquipmentSheetVO["vin"]=vin;
        modifyEquipmentSheetVO["carCard"]=carCard;
        modifyEquipmentSheetVO["startTime"]=startTime;
        modifyEquipmentSheetVO["endingTime"]=endingTime;
        $.ajax({
            type: "POST",
            url: "modifyEquipment",
            dataType: "json",
            contentType : "application/json;charset=utf-8",
            data:JSON.stringify(modifyEquipmentSheetVO) ,
            success: function (data){

                window.location.href="equipmentList";
            }})


    }
</script>



<!-- 模态框（Modal） -->
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header >
               <button type=" button
            " class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">装潢单录入</h4>
        </div>
        <div class="modal-body ">

            <div>

                <form class="form-horizontal">
                    <h3 class="page-header">装潢信息</h3>

                    <div class="form-inline">
                        <table class="table-responsive " style="border-collapse: separate;border-spacing:0 5px ">
                            <tr>
                                <td><label>装潢单号</label></td>
                                <td><input type="text" class="form-control" id="equipmentSheetNo1" readonly></td>

                                <td style="padding-left: 30px"><label>装潢业务类型</label></td>
                                <td><input type="text" class="form-control" id="upholsteryType1" readonly></td>

                                <td style="padding-left: 30px"><label>单据状态</label></td>
                                <td><input type="text" class="form-control" id="equipmentSheetState1" readonly></td>

                            </tr>


                            <tr style="margin-top: 10px">
                                <td><label>开单人</label></td>
                                <td><input type="text" class="form-control" id="employeeName1" readonly></td>

                                <td style="padding-left: 30px"><label>接单人</label></td>
                                <td><select id="personNo1" class="form-control"></select>



                            </tr>
                            <tr>
                                <td><label>备注</label></td>
                                <td colspan="5"><textarea type="text" class="form-control"
                                                          style="min-width:100%" id="comment1"></textarea></td>
                            </tr>
                        </table>

                    </div>
                </form>
            </div>
            <div>

                <form class="form-horizontal">
                    <h3 class="page-header">客户车辆信息</h3>

                    <div class="form-inline">
                        <table class="table-responsive " style="border-collapse: separate;border-spacing:0 5px ">
                            <tr>


                                <td><label>客户编号</label></td>
                                <td><input type="text" class="form-control" id="customerId1" readonly></td>

                                <td style="padding-left: 30px"><label>客户名称</label></td>
                                <td><input type="text" class="form-control" id="customerName1"></td>

                                <td><label style="padding-left: 30px">电话</label></td>
                                <td><input type="text" class="form-control" id="customerTel1"></td>

                            </tr>

                            <tr>

                                <td><label>车系</label></td>
                                <td><input type="text" class="form-control" id="series1"></td>

                                <td style="padding-left: 30px"><label>车型</label></td>
                                <td><input type="text" class="form-control" id="model1"></td>

                                <td style="padding-left: 30px"><label>颜色</label></td>
                                <td><input type="text" class="form-control" id="color1"></td>
                            </tr>
                            <tr>

                                <td><label>VIN</label></td>
                                <td><input type="text" class="form-control" id="vin1"></td>

                                <td style="padding-left: 30px"><label>车牌号</label></td>
                                <td><input type="text" class="form-control" id="carCard1"></td>

                            </tr>

                        </table>


                    </div>


                </form>
            </div>
            <div>

                <form class="form-horizontal">
                    <h5 class="page-header">车辆施工信息</h5>
                    <div class="form-inline">
                        <label>预计开工日期</label> <input type="text" class="form-control" id="startTime1">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <label>预计完工日期</label> <input type="text" class="form-control" id="endingTime1">
                    </div>

                </form>
            </div>
            <hr>
            <div>
                <h3 class="page-header">
                    装潢用品

                </h3>

                <table class="table " width="100%" id="decorationTableList">
                    <tr class="success">
                        <th width="80px">序号</th>
                        <th width="80px">用品名称</th>
                        <th width="80px">数量</th>
                        <th width="80px">计量单位</th>
                        <th width="80px">销售指导价</th>
                        <th width="80px">折扣率</th>
                        <th width="80px">实际价格</th>
                        <th width="80px">合计</th>
                    </tr>


                </table>
            </div>
            <div class="container">
                <form class="form-horizontal">
                    <div class="form-inline">
                        <label>合计金额</label><input class="form-control" id="totalPrice" readonly>
                        <label>应收金额</label><input class="form-control" id="receivables" readonly>
                        <label>赠送金额</label><input class="form-control" id="givenMoney" readonly>

                    </div>
                </form>

            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="modifySubmit">提交更改</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->

<script>
    //条件查询
    function searchByExample(){
        


            var selectEquipmentSheetVO = {
                "equipmentSheetNo": $("#equipmentSheetNo").val(),
                "customerName": $("#customerName").val(),
                "vin": $("#vin").val(),
                "carCard": $("#carCard").val(),
                "upholsteryType": $("#upholstery option:selected").val(),
                "openingTime1": $("#openingTime1").val(),
                "openingTime2": $("#openingTime2").val(),
                "equipmentSheetState": $("#equipmentSheetState option:selected").val(),
                "pageNo": page
            };
            $.ajax({
                type: "POST",
                url: "equipmentList1",
                data:JSON.stringify(selectEquipmentSheetVO) ,
                dataType: "json",
                contentType:"application/json",
                success: function (data) {
                    $("#equipmentMessage tr:not(:first)").not(":last").remove();
                    $(data).each(function (index, equipmentSheet) {
                        var tr = " <tr class='active'> <td>" + index + "</td> <td>" +
                            "<button class='btn btn-info btn-sm' onclick='showEquipmentDetail(" + equipmentSheet.equipmentSheetNo + ")'>详情/修改</button>" +
                            "<button class='btn btn-info btn-sm' onclick='cancelOrder(" + equipmentSheet.equipmentSheetNo + ")'>取消订单</button> </td>" +
                            "<td>" + equipmentSheet.equipmentSheetNo + "</td><td>" + equipmentSheet.upholsteryType + "</td>" +
                            "<td>" + equipmentSheet.customerId + "</td>" +
                            "<td>" + equipmentSheet.customerName + "</td>" +
                            "<td>" + equipmentSheet.customerTel + "</td>" +
                            "<td>" + equipmentSheet.vin + "</td>" +
                            "<td>" +transDate(equipmentSheet.openingTime)  + "</td>" +
                            "<td>" + equipmentSheet.totalPrice + "</td>" +
                            "<td>" + equipmentSheet.givenMoney + "</td>" +
                            "<td>" + equipmentSheet.receivables + "</td>" +
                            "<td>" + equipmentSheet.received + "</td>" +
                            "<td>" + equipmentSheet.equipmentSheetState + "</td></tr>";
                        $("#equipmentMessage tr:last").before(tr)

                    });



                }
            });

        
        
    }

        $("#searchByExample").click(function () {


            var selectEquipmentSheetVO = {
                "equipmentSheetNo": $("#equipmentSheetNo").val(),
                "customerName": $("#customerName").val(),
                "vin": $("#vin").val(),
                "carCard": $("#carCard").val(),
                "upholsteryType": $("#upholstery option:selected").val(),
                "openingTime1": $("#openingTime1").val(),
                "openingTime2": $("#openingTime2").val(),
                "equipmentSheetState": $("#equipmentSheetState option:selected").val(),
                "pageNo": $("#pageNo").val()
            };
            $.ajax({
                type: "POST",
                url: "equipmentList1",
                data:JSON.stringify(selectEquipmentSheetVO) ,
                dataType: "json",
                contentType:"application/json",
                success: function (data) {
                    $("#equipmentMessage tr:not(:first)").not(":last").remove();
                    $(data).each(function (index, equipmentSheet) {
                        var tr = " <tr class='active'> <td>" + index + "</td> <td>" +
                            "<button class='btn btn-info btn-sm' onclick='showEquipmentDetail(" + equipmentSheet.equipmentSheetNo + ")'>详情/修改</button>" +
                            "<button class='btn btn-info btn-sm' onclick='cancelOrder(" + equipmentSheet.equipmentSheetNo + ")'>取消订单</button> </td>" +
                            "<td>" + equipmentSheet.equipmentSheetNo + "</td><td>" + equipmentSheet.upholsteryType + "</td>" +
                            "<td>" + equipmentSheet.customerId + "</td>" +
                            "<td>" + equipmentSheet.customerName + "</td>" +
                            "<td>" + equipmentSheet.customerTel + "</td>" +
                            "<td>" + equipmentSheet.vin + "</td>" +
                            "<td>" +transDate(equipmentSheet.openingTime)  + "</td>" +
                            "<td>" + equipmentSheet.totalPrice + "</td>" +
                            "<td>" + equipmentSheet.givenMoney + "</td>" +
                            "<td>" + equipmentSheet.receivables + "</td>" +
                            "<td>" + equipmentSheet.received + "</td>" +
                            "<td>" + equipmentSheet.equipmentSheetState + "</td></tr>";
                        $("#equipmentMessage tr:last").before(tr)

                    });


                }
            });

        })

    $("#equipmentSheetState option").each(function(index) {
        var equ = document.getElementById("ddState1").value;
        if(equ == $(this).val()) {
            $("#equipmentSheetState").val(equ);
        }
    });
    //表单验证
    $("#equipmentSheetNo").blur(function () {
        var jQueryVal = $(this).val();
        if (isNaN(jQueryVal)) {
            $(this).val("");
        }

    });




</script>
</body>
</html>